<style>
#kuserNumber tr td div{
	padding: 20px;
	font-size: 36px;
	border: 1px solid gray;
	width: 86px;
	background-image: url('<?php echo $this->base; ?>/public/images/bg_bt.png');
	background-repeat: repeat-x;
	background-color: #e5e5e5;
	margin: 3px;
}
</style>

<script>

var valKbN = 0;
var idElm  = 0;
var msgBtn = "";
var fn;


function keybnumShow(j, vfn)
{
	if(!vfn)
	{
		vfn = function(){};
	}
	
	idElm = j.elm;
	msgBtn = j.title;

	fn = vfn;
		
	$("#kuserNumberTxt").val("").focus().select();

	if(j.bg)
	{
		$(".bg_transp").show();
	}
	
	$("#keynum").show();

	$("#ktitlekeyNum").html(j.title);
}

function setBtn()
{
	var valKbN = $('#kuserNumberTxt').val();

	if(valKbN == "")
	{
	//alert(valKbN);
		//var valKbN = "0";
		//alert("Numero invalido.");

		//return false;
	}
	
	$(idElm).val(valKbN).html(valKbN);
	$(idElm + "div").html(msgBtn + " <b>" + valKbN + "</b>");
	keybnumHide(valKbN);
	valKbN = 0;
}

function keybnumHide(val)
{
	fn(val);
		
	$("#keynum").hide();
}

function fechar()
{
	$('#forma_pagamento').animate({opacity: 1}, 300);
	
	$("#keynum").hide();
}

</script>

<div class="ui-corner-all" style="padding: 10px; top: 20px; width: 400px; border: 1px solid #B0ADAD; left: 50%; margin-left: -200px; background-color: white; display: none; z-index: 999; position: fixed;" id="keynum">
	<div class="ui-corner-all" style="position: absolute; margin-left: 320px; padding: 5px; background: red;">
		<a href="javascript:;" onclick="fechar();" style="color: white; font-size: 14px; padding: 10px; text-decoration: none;">
			<b>Fechar</b>
		</a>
	</div>
	<div class="ui-corner-all" style="position: absolute; margin-left: 220px; padding: 5px; background: green;">
		<a href="javascript:;" onclick="setBtn();" style="color: white; font-size: 14px; padding: 10px; text-decoration: none;">
			<b>Adicionar</b>
		</a>
	</div>
	<div id="ktitlekeyNum" class="ui-widget ui-corner-all" style="font-size: 22px; height: 35px; color: gray;"></div>
	<hr />
	<table align="center" border="0" id="kuserNumber" cellpadding="0" cellspacing="0" style="text-align: center; font-size: 40px; z-index: 3; position: relative;">
		<tr>
			<td>
				<div onclick="addNumB(1);">
					1
				</div>
			</td>
			<td>
				<div onclick="addNumB(2);">
					2
				</div>
			</td>
			<td>
				<div onclick="addNumB(3);">
					3
				</div>
			</td>
		</tr>
		<tr>
			<td>
				<div onclick="addNumB(4);">
					4
				</div>
			</td>
			<td>
				<div onclick="addNumB(5);">
					5
				</div>
			</td>
			<td>
				<div onclick="addNumB(6);">
					6
				</div>
			</td>
		</tr>
		<tr>
			<td>
				<div onclick="addNumB(7);">
					7
				</div>
			</td>
			<td>
				<div onclick="addNumB(8);">
					8
				</div>
			</td>
			<td>
				<div onclick="addNumB(9);">
					9
				</div>
			</td>
		</tr>
		<tr>
			<td>
				<div id="btn_reset" onclick="$('#kuserNumberTxt').val('');" style="padding-left: 3px; text-align: center; width: 103px;">
					Apagar
				</div>
			</td>
			<td>
				<div onclick="addNumB(0);">
					0
				</div>
			</td>
			<td>
				<div  id="btn_login" onclick="addNumB(',');">
					,
				</div>		
			</td>
		</tr>
		<tr>
			<td style="padding: 0px; margin: 0">
			</td>
			<td>
				<input id="kuserNumberTxt" maxlength="3" type="text" class="ui-widget ui-corner-all" value="66" style="text-align: center; width: 125px; font-size: 24px;" />
				<script>$("#kuserNumberTxt").focus()</script>
			</td>
			<td>
			</td>
		</tr>
	</table>
</div>

<script>

$("#kuserNumber tr td div").addClass("ui-corner-all");

function addNumB(num){
		var nnTxt = $("#kuserNumberTxt").val() + num;

		$("#kuserNumberTxt").val(nnTxt);
}

</script>